<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
<script src='https://cdn.bootcss.com/echarts/3.4.0/echarts.js'></script>
<script src='ecStat.js'></script>
<script>
                // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main'));
            var colors=['#5793f3','#d14a61','#675bba'];
            var option={
                color:colors,
                tooltip:{
                    trigger:'none',
                    axisPointer:{
                        type:'cross'
                    }
                },
                legend:{
                    data:['2015降水量','2016降水量']
                },
                grid:{
                    top:40,bottom:40,
                },
                xAxis:[{
                    type:'category',    //坐标轴类型类目轴
                    axisTick:{
                            alignWithLabel:true      //可以保证刻度线和标签对齐
                    },
                    axisLine:{                 //轴线设置
                        onZero:false,
                        lineStyle:{
                            color:colors[1]
                        }
                    },
                    axisPointer:{
                        label:{
                            formatter:function(params){
                                return '降水量'+params.value+(params.seriesData.length?':'+params.seriesData[0].data:'');
                            }
                        }
                    },
                    data:["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
                },{
                    type:'category',
                    axisTick:{
                        alignWithLabel:true
                    },
                    axisLine:{
                        onZero:false,  //轴线是否在另一个轴的 0 刻度上
                        lineStyle:{color:colors[0]}
                    },
                    axisPointer:{   
                        label:{   //坐标轴指示器的文本标签
                            formatter:function(params){  //格式化指示器
                                return ' 降水量'+params.value+(params.seriesData.length ?':'+params.seriesData[0].data:'');
                            }
                        }
                    },
                    data:["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
                }],
                    yAxis: [{
                    type:'value'
                }],
                series:[{
                    name:'2015降水量',
                    type:'line',
                    xAxisIndex:1,
                    smooth:true,     //是否平滑曲线
                    data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
                },{
            name:'2016降水量',
            type:'line',
            smooth: true,
            data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
        }]
            };
            myChart.setOption(option)
    </script>
</body>